import {useState,useEffect} from 'react'
import CartHeader from './components/cartHeader/index.js'
import CartFooter from './components/CartFooter/index.js'
import { GoodsItem } from './components/GoodsItem'
import './App.scss'

import axios from 'axios'
const http = axios.create({
  baseURL:'http://localhost:8888/'
})
const App = ()=>{
  const [goodsList,setGoodsList] = useState([])
  useEffect(()=>{
    const loadData = async ()=>{
      const res = await http.get('goodsList')
      console.log(res.data);
      setGoodsList(res.data)
    }
    loadData()
  },[])
  
  const change_state = (value,id)=>{
    const newgoodList = goodsList.map( item =>{
      if(item.id === id){
        item.goods_state = value
        http.patch(`goodsList/${item.id}`,{
          goods_state:value
        })
        return item
      }else{
        return item
      }
    })
    setGoodsList(newgoodList)
    newgoodList.forEach( item =>{
      http.patch(`goodsList/${item.id}`,{
        goods_state:item.goods_state
      })
    })
    
    console.log(value,id);
   }
   //全选
   const [isAllChecked,setIsAllChecked] = useState(false)
   const changeAllSelect = (checked)=>{
      setIsAllChecked(checked)
      if(checked){
        
      }
   }

  return (
    <div className="app">
      <CartHeader>购物车案例</CartHeader>
      <GoodsItem goodsList={goodsList} change_state={change_state} />
      <CartFooter changeAllSelect={changeAllSelect} isAllChecked={isAllChecked} />
    </div>
  )
}
export default App